<div ...attributes>
  <Apis::ServerForm @model={{this.serverModel}} @collection={{this.model.servers}} @apiBackendProtocol={{this.model.backendProtocol}} @apiBackendHost={{this.model.backendHost}} @openModal={{this.openModal}} />

  <table id="servers_table" class="table table-striped table-sm">
    <thead>
      <tr>
        <th>{{t "Server"}}</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {{#if this.model.servers}}
        {{#each this.model.servers as |server|}}
          <tr>
            <td>{{this.model.backendProtocol}}://{{server.hostWithPort}}</td>
            <td class="table-row-actions">
              <a href="#" {{action "edit" server}}><FaIcon @icon="pencil-alt" />{{t "Edit"}}</a>
              <a href="#" class="remove-action" {{action "remove" server}}><FaIcon @icon="times" />{{t "Remove"}}</a>
            </td>
          </tr>
        {{/each}}
      {{else}}
        <tr class="empty"><td colspan="2">{{sprintf (t "No backend servers have been added yet. Click \"%s\" below to get started.") (t "Add Server")}}</td></tr>
      {{/if}}
    </tbody>
  </table>
  <button type="button" class="btn btn-light btn-sm" {{action "add"}}><FaIcon @icon="plus-circle" /> {{t "Add Server"}}</button>
</div>
